<template>
    <div class="loginPage">
        <div class="form">
            <div class="logo">
                <!-- <el-icon class="iconStyle"><Shop /></el-icon> -->
                <svg-icon icon-class="login-mall" class="iconStyle" />
                <h1>商城后台管理</h1>
            </div>
            <div class="inputs">
                <el-form ref="ruleFormRef" :model="form" :rules="rules">
                    <el-form-item prop="username">
                        <el-input v-model="form.username">
                            <template #prefix>
                                <svg-icon icon-class="user" class="smallIcon" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" :type="eyeIcon ? 'text' : 'password'">
                            <template #prefix>
                                <svg-icon icon-class="password" class="smallIcon iconpwd" />
                            </template>
                            <template #suffix>
                                <svg-icon @click.native="eyeIcon = !eyeIcon" :icon-class="eyeIcon ? 'openeye' : 'eye'"
                                    class="smallIcon iconeye" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Shop } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import type { FormInstance, FormRules } from 'element-plus'
const  router = useRouter();
const store = useStore();
let eyeIcon = ref(false);
const form = reactive({
    username: '',
    password: '',
});
interface RuleForm {
    username: string
    password: string

}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    username: '',
    password: ''
})

const rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        {
            validator(rule, value) {
                if (!/^[a-z0-9]+$/i.test(value)) {
                    return new Error('用户名只能包含字母和数字');
                }
                return true;
            }, trigger: 'blur'
        },
        { min: 1, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, message: '密码最少3位', trigger: 'blur' },
    ]
});
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            // try{
                await store.dispatch('Login', form);
                console.log(store.state.user);
                
                router.push('/');
            // }catch(err){
                // console.log(err);
            // }
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>
<style lang="scss" scoped>
// 定义变量
$iconColor: rgb(64, 158, 255);

.loginPage {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    &::after {
        content: '';
        position: absolute;
        height: 300px;
        background: rgba(64, 158, 255, 1.0) url('../../assets/images/login_center_bg.png') no-repeat center 0;
        background-size: auto 100%;
        background-color: rgba(64, 158, 255, 1.0);
        width: 100%;
        left: 0;
        top: 10vw;
    }
    .form {
        width: 320px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 8vw;
        left: 50vw;
        transform: translate(-50%, 0);
        z-index: 10;
        border-top: 8px solid rgb(64, 158, 255);
        border-radius: 3px;
        background-color: #fff;
        padding: 40px 20px;

        .logo {
            text-align: center;
            margin-bottom:20px;
            .iconStyle {
                color: $iconColor;
                width: 50px;
                height: 50px;
            }

            h1 {
                color: $iconColor;
                font-size: 20px;
            }
        }

        .el-button {
            font-size: 12px;
            width: 100px;
            height: 30px;
            margin: 0 auto;
            display: block;
        }

        .smallIcon {
            color: $iconColor;
            width: 16px;
            height: 16px;
        }

        .iconpwd {
            width: 13px;
            height: 13px;
            position: relative;
            left: 1px;
        }

        .iconeye {
            cursor: pointer;
        }
        .el-input{
            margin:5px 0;
        }
    }
}
</style>